<template>
  <view class="repair-details-container">
    <!-- 维修信息卡片 -->
    <view class="info-card">
      <view class="card-title">维修信息</view>
      
      <view class="info-item">
        <text class="info-label">维修单号:</text>
        <text class="info-value">{{ repairInfo.orderNumber }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">车主姓名:</text>
        <text class="info-value">{{ repairInfo.ownerName }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">联系方式:</text>
        <text class="info-value">{{ repairInfo.contactPhone }}</text>
        <image src="/static/maintenance-img/电话.png" class="action-icon" />
      </view>
      
      <view class="info-item">
        <text class="info-label">维修方式:</text>
        <text class="info-value">{{ repairInfo.repairMethod }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">取车位置:</text>
        <text class="info-value">{{ repairInfo.pickupLocation }}</text>
        <image src="/static/maintenance-img/plane.png" class="action-icon" />
      </view>
      
      <view class="info-item">
        <text class="info-label">预约日期:</text>
        <text class="info-value">{{ repairInfo.appointmentDate }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">提交日期:</text>
        <text class="info-value">{{ repairInfo.submitDate }}</text>
      </view>
    </view>
    
    <!-- 车辆信息卡片 -->
    <view class="info-card">
      <view class="card-title">车辆信息</view>
      
      <view class="info-item">
        <text class="info-label">车辆类型:</text>
        <text class="info-value">{{ vehicleInfo.vehicleType }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">车牌号:</text>
        <text class="info-value">{{ vehicleInfo.licensePlate }}</text>
      </view>
      
      <view class="info-section">
        <text class="section-label">整车照片:</text>
        <view class="vehicle-image-container">
          <image 
            :src="vehicleInfo.fullVehiclePhoto" 
            class="vehicle-image"
            mode="aspectFill"
            @click="previewImage(vehicleInfo.fullVehiclePhoto)"
          />
        </view>
      </view>
      
      <view class="info-section">
        <text class="section-label">维修部位照片:</text>
        <view class="repair-photos-grid">
          <image 
            v-for="(photo, index) in vehicleInfo.repairPhotos" 
            :key="index"
            :src="photo" 
            class="repair-photo-item"
            mode="aspectFill"
            @click="previewImage(photo)"
          />
        </view>
      </view>
    </view>
    
    <!-- 底部确认按钮 -->
    <view class="bottom-actions">
      <button 
        class="confirm-btn" 
        :class="{ 'arrived-btn': repairInfo.arrivalTime }"
        @click="confirmArrival"
        :disabled="repairInfo.arrivalTime"
      >
        {{ repairInfo.arrivalTime ? '已到场' : '确认到场' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      repairInfo: {
        orderNumber: '3535252',
        ownerName: '张',
        contactPhone: '1993829282',
        repairMethod: '上门取车 / 到店维修',
        pickupLocation: '山阳区32号',
        appointmentDate: '2023/03/18 12:00',
        submitDate: '2022/03/13 11:00',
        arrivalTime: null // 到场时间，初始为null
      },
      vehicleInfo: {
        vehicleType: '大客车',
        licensePlate: '豫J45323',
        fullVehiclePhoto: '/static/maintenance-img/小车维修01.png',
        repairPhotos: [
          '/static/maintenance-img/小车维修01.png',
         
        ]
      }
    }
  },
  
  onLoad(options) {
    console.log('维修详情页面加载，参数：', options);
    
    // 根据传入的参数更新维修信息
    if (options.orderNumber) {
      this.repairInfo.orderNumber = options.orderNumber;
    }
    if (options.ownerName) {
      this.repairInfo.ownerName = decodeURIComponent(options.ownerName);
    }
    if (options.contactPhone) {
      this.repairInfo.contactPhone = options.contactPhone;
    }
    if (options.repairMethod) {
      this.repairInfo.repairMethod = decodeURIComponent(options.repairMethod);
    }
    if (options.appointmentDate) {
      this.repairInfo.appointmentDate = decodeURIComponent(options.appointmentDate);
    }
    
    this.loadRepairDetails();
  },
  
  methods: {
    // 加载维修详情
    loadRepairDetails() {
      console.log('加载维修详情数据');
      // 这里可以根据维修单号从API获取详细信息
    },
    
    
    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl
      });
    },
    
    // 确认到场
    confirmArrival() {
      // 如果已经到场，直接返回
      if (this.repairInfo.arrivalTime) {
        return;
      }
      
      uni.showModal({
        title: '确认到场',
        content: '确认您已到达维修现场？',
        success: (res) => {
          if (res.confirm) {
            // 直接设置到场时间，不显示加载效果
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            
            this.repairInfo.arrivalTime = `${year}/${month}/${day} ${hours}:${minutes}`;
            
            uni.showToast({
              title: '确认到场成功',
              icon: 'success'
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.repair-details-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
  padding-bottom: 120rpx;
  position: relative;
}

/* 页面背景色区域 - 顶部蓝色区域 */
.repair-details-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 350rpx; /* 蓝色区域高度 */
    background-color: #3184FD;
    z-index: 0; /* 在页面内容下方 */
}

.info-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
  min-width: 140rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.action-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 15rpx;
  flex-shrink: 0;
}

.info-section {
  margin-bottom: 30rpx;
}

.info-section:last-child {
  margin-bottom: 0;
}

.section-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.vehicle-image-container {
  display: flex;
  justify-content: flex-start;
  margin: 20rpx 0;
}

.vehicle-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 6rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.repair-photos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin: 15rpx 0;
  justify-content: flex-start;
}

.repair-photo-item {
  width: 200rpx;
  height: 150rpx;
  border-radius: 6rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  background-color: #0a78ff;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-btn:active {
  background-color: #0056b3;
  transform: scale(0.98);
}

.arrived-btn {
  background-color: #999 !important;
  color: #fff !important;
  cursor: not-allowed;
}

.arrived-btn:active {
  background-color: #999 !important;
  transform: none !important;
}
</style>